<template>
  <div class="jay-desktop-taskbar">
    <div class="jay-desktop-taskbar-start">
      <taskbar-item icon-type="iconfont" icon="icon-color-icon_win10" label="开始菜单" id="taskbar:play"/>
      <taskbar-item icon-type="iconfont" icon="icon-sousou" label="搜索" id="taskbar:search"/>
    </div>
    <div class="jay-desktop-taskbar-active">
        <taskbar-item
          v-for="item in activeApps"
          icon-type="img"
          :icon="item.icon"
          :label="item.label"
          :id="item.id"
          :key="item.id"
        />
    </div>
    <div class="jay-desktop-taskbar-end">
      <div class="jay-desktop-taskbar-end-date">
        <span class="info-1">{{time}}</span>
        <span class="info-2">{{timeFormat(Date.now(),"yyyy/mm/dd")}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {nowFormat,timeFormat} from '../../../utils/timeFormat'
  import TaskbarItem from '../TaskbarItem/index.vue'
  import {mapState} from 'vuex'
  export default {
    name: "Taskbar",
    components:{
      TaskbarItem
    },
    data(){
      return{
        timer: 0,
        time:'',
        date: ''
      }
    },
    methods:{
      nowFormat,
      timeFormat
    },
    computed:{
      ...mapState('app',{
        activeApps: state=>state.activeApps
      })
    },
    beforeDestroy() {
      window.clearInterval(this.timer)
    },
    created() {
      this.timer = setInterval(()=>{
        let {hour,minutes} = nowFormat()
        this.time = `${hour}:${minutes}`
      },900)
    }
  }
</script>

<style lang="scss">
  .jay-desktop-taskbar{
    width: 100%;
    height: 100%;
    background-color: $taskbar-background-color;
    display: flex;
    justify-content: space-between;
    position: relative;
    &-start{
      display: flex;
      justify-content: center;
    }
    &-active{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
    }
    &-end{
      &-date{
        width: 73px;
        height: 100%;
        display: flex;
        flex-direction: column;
        color: #ffffff;
        font-size: 12px;
        .info-1{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .info-2{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
</style>